<template>
  <div class="warp">
    <div class="searchbox">
      <div class="boxinp">
        <el-input
          placeholder="请输入内容"
          v-model="keyword"
          clearable
        ></el-input>
      </div>
      <div class="searbtn" @click="seaech">搜索</div>
    </div>
    <div class="box">
      <div class="boxbtn">
        <div
          :class="['btn', flag == 'video' ? 'con' : '']"
          @click="flag = 'video'"
        >
          视频
        </div>
        <div
          :class="['btn', flag == 'video' ? '' : 'con']"
          @click="flag = 'master'"
        >
          文章
        </div>
      </div>
      <br />
      <hr />
      <div class="lists" v-if="kong" style="height: 60vh">
        <el-empty description="描述文字"></el-empty>
      </div>
      <div class="boxss" v-if="!kong">
        <div class="lists" v-show="flag == 'video'">
          <div
            class="item"
            v-for="(items, indexs) in CourseListsFun()"
            :key="indexs + 'osp'"
          >
            <div class="itemimg">
              <img :src="items.imgs" :alt="items.title" />
            </div>
            
            <div class="titles">
              <p>{{ items.title }}</p>
              <p class="text">
                {{ items.times }} <i class="iconfont icon-view"></i>
                {{ items.num }}人正在学习
              </p>
            </div>
          </div>
        </div>
        <div class="lists" v-show="flag == 'master'">
          <div class="item">
            <div class="itemimg">
              <img src="../assets/imgs/Hot/七英下.jpg" alt="" />
            </div>
            <div class="titles">
              <p>语文是什么</p>
              <p class="text">
                2022-03-31 <i class="iconfont icon-view"></i> 66907人正在学习
              </p>
            </div>
          </div>
          <div class="item">
            <div class="itemimg">
              <img src="../assets/imgs/Hot/七英下.jpg" alt="" />
            </div>
            <div class="titles">
              <p>语文是什么</p>
              <p class="text">
                2022-03-31 <i class="iconfont icon-view"></i> 66907人正在学习
              </p>
            </div>
          </div>
        </div>

        <!-- 分页条 -->

        <ul class="app-pagination">
          <li @click="pagefirst">
            <span> 首页 </span>
          </li>
          <li @click="pageup">
            <span> 上一页 </span>
          </li>
          <li
            :class="[tpyes == count ? 'active' : '']"
            v-for="count in pages"
            :key="count"
            @click="pageFun(count)"
          >
            <span> {{ count }} </span>
          </li>
          <li @click="pagedown">
            <span> 下一页 </span>
          </li>
          <li @click="pagelast">
            <span> 尾页 </span>
          </li>
          <li class="total">
            <p href="javascript:void(0)">共 {{ pages }} 条</p>
          </li>
        </ul>

        <!-- 分页条 END-->
      </div>
    </div>
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";
export default {
  data() {
    return {
      flag: "video",
      keyword: "",
      kong: true,
      CourseVideoLists: null, //课程视频列表
      HotLists: null, //热点推荐列表
      Enlistening: null, //英语听力列表
      Masterlists: null, //热点资料列表
      AllList: [], //全部列表
      pageslsit: null,
      pages: 0, //页总数
      index: 0, //页码
      tpyes: 1, //激发态
    };
  },
  methods: {
    getCourseVideoListsFun() {
      //获取课程视频
      getJsonData().then((data) => {
        this.CourseVideoLists = data["CourseVideoLists"];
        if (this.CourseVideoLists) {
          this.CourseVideoLists.forEach((item) => this.AllList.push(item));
          // this.AllList.push(item)
        }
      });
    },
    getHotListsFun() {
      //获取热点推荐
      getJsonData().then((data) => {
        this.HotLists = data["HotLists"];
        this.HotLists.forEach((item) => this.AllList.push(item));
      });
    },
    getEnlisteningFun() {
      //获取英语听力
      getJsonData().then((data) => {
        this.Enlistening = data["Enlistening"];
        this.Enlistening.forEach((item) => this.AllList.push(item));
      });
    },
    getMasterlistsFun() {
      //获取热点资料
      getJsonData().then((data) => {
        this.Masterlists = data.Masterlists;
      });
    },
    seaech() {
      //搜索功能
      console.log("最后", this.AllList);
      if (this.keyword == "") {
        return (this.kong = true);
      }

      let lists = this.AllList.filter((item) => {
        if (item.title.includes(this.keyword)) {
          return item;
        }
      });
      this.pageslsit = lists;
      // console.log("lists",lists);
      if (lists.length != 0) {
        this.kong = false;
      } else {
        this.kong = true;
        // 弹窗提示
        this.$message({
          showClose: true,
          message: "查无此类",
          type: "warning",
        });
      }
      this.keyword = "";
      return lists;
    },
    // 分页功能
    CourseListsFun() {
      let num = 2; //数据数量
      this.pages = Math.ceil(this.pageslsit.length / num); //页总数
      return this.pageslsit.slice(this.index, this.index + num);
    },
    pagedown() {
      if (this.index < this.pages - 1) {
        this.tpyes += 1;
        this.index += 1;
      }
    },
    pagelast() {
      this.index = this.pages - 1;
      this.tpyes = this.pages;
    },
    pagefirst() {
      this.index = 0;
      this.tpyes = 1;
    },
    pageFun(pages) {
      console.log(pages);
      this.index = pages - 1;
      this.tpyes = pages;
    },
    pageup() {
      if (this.index > 0) {
        this.tpyes -= 1;
        this.index -= 1;
      }
    },
  },
  created() {
    this.getCourseVideoListsFun(); //获取课程视频
    this.getHotListsFun(); //获取热点推荐
    this.getEnlisteningFun(); //获取英语听力
    this.getMasterlistsFun(); //获取热点资料
  },
};
</script>

<style lang="scss" scoped>
.boxss {
  padding-bottom: 50px;
}

.searchbox {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 100px;
  .boxinp {
    width: 640px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .searbtn {
    font-weight: 500;
    color: #fff;
    width: 110px;
    height: 44px;
    line-height: 46px;
    display: block;
    background: #48c5a3;
    text-align: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
.box {
  width: 100%;
  // height: 60vh;
  background: #fff;
  .boxbtn {
    display: flex;
    justify-content: center;
    height: 80px;
    line-height: 80px;
    font-size: 22px;
    cursor: pointer;
    .btn {
      display: inline-block;
      margin: 0px 80px;
    }
    .con {
      font-size: 26px;
      font-weight: 800;
      color: #48c5a3;
      position: relative;
      &::before {
        content: "";
        display: block;
        position: absolute;
        background: #48c5a3;
        width: 20px;
        height: 4px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        margin: 0 auto;
      }
    }
  }
  .lists {
    width: 1070px;
    // height: 300px;
    margin: 0 auto;
    .item {
      width: 100%;
      box-sizing: border-box;
      height: 200px;
      padding: 0px 20px;
      display: flex;
      align-items: center;
      box-shadow: 0px 0px 4px 2px rgba(204, 204, 204, 0.3);
      margin: 20px 0px;
      .itemimg {
        width: 150px;
        height: 120px;
        margin-right: 25px;
        border: 1px solid rgba(51, 51, 51, 0.4);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .titles {
        font-size: 20px;
        color: #333;
        display: flex;
        flex-direction: column;
        p {
          height: 50px;
          line-height: 50px;
          margin-bottom: 10px;
        }
        .text {
          font-size: 14px;
        }
      }
    }
  }
}

/* 分页条 */
.app-pagination {
  margin: 40px auto;
  // margin-bottom: 150px;
  text-align: center;
  li {
    display: inline-block;
    margin: 0 6px;
    cursor: pointer;
    span {
      padding: 5px 10px;
      display: inline-block;
      color: #626262;
      background: #fff;
      border-radius: 2px;
      border: 1px solid #ddd;
      cursor: pointer;
    }
  }
}
.app-pagination li .active-link,
.app-pagination li.active span,
.app-pagination li span:hover {
  color: #fff;
  border: 1px solid #48c5a3;
  background: #48c5a3;
}
</style>